<template>
    <ul class="action">
        <li>
            <el-tooltip content="背景色颜色" placement="left">
                <span class="color">
                    <el-color-picker v-model="node.style.fill" @change="getColor" />
                </span>
            </el-tooltip>
        </li>
        <li>
            <el-tooltip content="描边颜色" placement="left">
                <span class="color">
                    <el-color-picker v-model="node.style.stroke" @change="getColor" />
                </span>
            </el-tooltip>
        </li>
        <li>
            <el-tooltip content="文字颜色" placement="left">
                <span class="color">
                    <el-color-picker v-model="node.labelCfg.style.fill" @change="getColor" />
                </span>
            </el-tooltip>
        </li>
        <li v-for="item in comboAction" :key="item.id" @click="change(item)">
            <el-tooltip :content="item.name" placement="left">
                <svg-icon class="icon" :name="item.icon"></svg-icon>
            </el-tooltip>
        </li>
    </ul>
</template>

<script lang='ts' setup>
interface IProps {
    node: any,
    str?: string,
}
const emit = defineEmits(["change"])
const props = defineProps<IProps>()

// combo 配置项
let comboAction = [
    {
        "id": "combo0",
        "name": "添加文字",
        "icon": "wenzi",
        "type": "text-add",
        "model": ''
    },
    {
        "id": "combo1",
        "name": "字体增加",
        "icon": "zitijiada",
        "type": "size",
        "model": '',
        // 操作
        "action": (node: any) => {
            node.labelCfg.style.fontSize >= 30 ? null : node.labelCfg.style.fontSize += 2
        }
    },
    {
        "id": "combo2",
        "name": "字体减小",
        "icon": "zitijianxiao",
        "type": "size",
        "model": '',
        // 操作
        "action": (node: any) => {
            node.labelCfg.style.fontSize <= 10 ? null : node.labelCfg.style.fontSize -= 2
        }
    },
    {
        "id": "combo3",
        "name": "文本左平移",
        "icon": "a-zuojiantouzhixiangzuojiantou",
        "type": "",
        "model": '',
        // 操作
        "action": (node: any) => {
            node.labelCfg.refX -= 2
        }
    },
    {
        "id": "combo4",
        "name": "文本右平移",
        "icon": "a-youjiantouzhixiangyoujiantou",
        "type": "",
        "model": '',
        // 操作
        "action": (node: any) => {
            node.labelCfg.refX += 2
        }
    },
    {
        "id": "combo5",
        "name": "文本上平移",
        "icon": "uparrow",
        "type": "",
        "model": '',
        // 操作
        "action": (node: any) => {
            node.labelCfg.refY += 2
        }
    },
    {
        "id": "combo6",
        "name": "文本下平移",
        "icon": "downarrow",
        "type": "",
        "model": '',
        // 操作
        "action": (node: any) => {
            node.labelCfg.refY -= 2
        }
    },

]
const change = (item: any) => {
    if (item.type === 'text-add') {
        emit('change', item)
        return
    }
    item.action(props.node)

    emit('change', props.node)
}
// 获取颜色
const getColor = (color: string, item: any) => {
    emit('change', props.node)
}
</script>

<style scoped>

</style>